<template>
  <el-dialog
    v-model="dialogVisible"
    title="创建客单"
    width="800px"
    :before-close="handleClose"
  >
    <div style="width: 100%; margin: 0 auto">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="验证用户手机号" />
        <el-step title="创建用户" />
        <el-step title="选择服务/商品" />
      </el-steps>
      <div
        v-show="active == 1"
        style="min-height: 320px; display: flex; justify-content: center"
      >
        <userPhone @upChange="upChange"></userPhone>
      </div>
      <div v-show="active == 2">
        <userInfo
          :gaokaoyear="gaokaoyear"
          :provincelist="provincelist"
          @upChange="upChange"
          @resetForm="downChange"
        ></userInfo>
      </div>
      <div v-show="active == 3">
        <userTable :kd_price="kd_price" @upChange="upChange"></userTable>
      </div>
    </div>
  </el-dialog>
</template>
<script setup>
import {
  tzyOrdersCreate,
  userCreate,
  isHaveUser,
} from '@/api/leader/Filling.js';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import userPhone from './userPhone.vue';
import userInfo from './userInfo.vue';
import userTable from './userTable.vue';

const emit = defineEmits(['refreshStudentList']);

const { provincelist, gaokaoyear, kd_price } = defineProps({
  provincelist: {
    type: Array,
    default: [],
  },
  gaokaoyear: {
    type: Array,
    default: [],
  },
  kd_price: {
    type: Number,
    default: '',
  },
});

let studentInfo = reactive({
  phone: '', // 手机号
  nick: '', // 名字
  sex: '', // 性别0-女 1-男
  nation: '', // 民族
  pid: '', // 高考省ID
  graduate_time: '', // 高考年份
  s_province: '', // 学校所在省
  s_city: '', // 学校所在城市
  s_district: '', // 学校所在区
  s_school: '', // 学校名称
  f_name: '', // 父亲姓名
  f_phone: '', // 父亲电话
  f_career: '', // 父亲职业
  m_name: '', // 母亲姓名
  m_phone: '', // 母亲电话
  m_career: '', // 母亲职业
  remark: '', // 备注
});

// 是否显示当前页面
const dialogVisible = ref(false);
const active = ref(1); // 设置默认参数

const showAddUserInfo = () => {
  dialogVisible.value = true;
};

function handleClose() {
  dialogVisible.value = false;
  active.value = 1; // 重新设置默认
}

function upChange(curIndex, toIndex, val) {
  if (curIndex == 1) {
    // 手机号填写
    studentInfo.phone = val;
    // 判断手机号是否已在后台存在
    isHaveUser({ phone: val }).then((res) => {
      if (res.data.isUser) {
        // 存在跳转购买服务
        active.value = 3;
      } else {
        // 不存在跳转用户信息录入
        active.value = toIndex;
      }
    });
  } else if (curIndex == 2) {
    // 用户信息录入
    let info = {
      ...studentInfo,
      ...val,
    };
    studentInfo = info;

    if (toIndex == 1) {
      active.value = toIndex;
    } else {
      let studentData = studentInfo;
      userCreate(studentData).then(() => {
        active.value = toIndex;
      });
    }
  } else if (curIndex == 3) {
    // 购买服务
    if (toIndex == 0) {
      let orderData = {
        studentMobile: studentInfo.phone,
        serviceId: val.id,
        serviceName: val.name,
      };
      tzyOrdersCreate(orderData).then(() => {
        ElMessage({
          type: 'success',
          message: '创建成功',
        });
        // 通知刷新用户列表
        emit('refreshStudentList');
        // 关闭页面
        handleClose();
      });
    } else {
      if (studentInfo.s_province.length > 0) {
        active.value = toIndex;
      } else {
        active.value = 1;
      }
    }
  }
}

defineExpose({
  showAddUserInfo,
});
</script>
<style lang="scss" scoped>
// 默认当前激活步骤显示的是黑色，这里修改显示为蓝色
::v-deep(.el-step__head.is-process) {
  color: #1890ff !important; // 圆圈中数字
  border-color: #1890ff !important; // 圆圈
}

::v-deep(.el-step__title.is-process) {
  color: #1890ff !important; // 圆圈下的标题文本
}
</style>
